<template>
    <div>
        <div class="echartBox">
            <div id="chart" style="width: 100%;height: 350px;"></div>
        </div>
        <div class="tableBox">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" highlight-current-row :isShowPage="false" :current="false" max-height="660px" />
        </div>
    </div>
</template>


<script>
import * as echarts from "echarts";
export default {
    name: 'mlbhqs',
    props: {
        rowData: {
            type: Array, default: function () {
                return []
            }
        },


    },
    data() {
        return {
            loading: false,
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    itemWidth: 18,
                    itemHeight: 12,
                    icon: "rect",
                    top: '8%',
                    left: '45%', //图例距离左的距离
                    textStyle: {
                        'color': '#000'
                    },
                    data: [],

                },
                grid: {
                    left: '2%',
                    right: '2%',
                    top: '20%',
                    bottom: '10%',
                    containLabel: true,

                },
                xAxis: [{
                    type: 'category',
                    axisLabel: {
                        show: true,
                        fontSize: 14,
                        interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                        rotate: 30, //调整数值改变倾斜的幅度（范围-90到90）
                        textStyle: {
                            color: "#000",

                        }
                    },

                    axisLine: {
                        show: true,
                        onZero: true,
                        onZeroAxisIndex: null,
                        lineStyle: {
                            color: '#B9B8CE',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    splitLine: { //分割线
                        lineStyle: {
                            color: "#B9B8CE",
                            width: 1,
                            type: "solid"
                        }
                    },
                    data: []
                }],
                yAxis: [{
                    type: 'value',
                    // name: '单位：万元',
                    nameTextStyle: {
                        color: '#000'
                    },
                    axisLabel: {
                        formatter: function (value, index) {
                            if (value >= 100000000) {
                                return value / 100000000 + ".00亿";
                            } else if (value >= 10000) {
                                return value / 10000 + ".00万";
                            } else if (value <= -100000000) {
                                return value / 100000000 + ".00亿";
                            } else if (value <= -10000) {
                                return value / 10000 + ".00万";
                            } else {
                                return value;
                            }
                        },
                        interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                        rotate: 30, //调整数值改变倾斜的幅度（范围-90到90）
                        fontSize: 14,
                        margin: 8,
                        textStyle: {
                            color: '#000'
                        }
                    },
                    axisLine: {
                        show: true,

                        onZero: true,
                        onZeroAxisIndex: null,

                    }
                }],
                // color: color,
                // gradientColor: ["#f6efa6", " #d88273", '#bf444c'],
                series: []

            },

            tableDatas: [],
            tableColumns: [
                {
                    label: '月份',
                    prop: 'kprq',
                    align: 'center',

                },
                {
                    label: '采购金额(元)',
                    prop: 'cgje',
                    align: 'center',

                },
                {
                    label: '销售金额(元)',
                    prop: 'xsje',
                    align: 'center',

                },
                {
                    label: '购销差额(元)',
                    prop: 'gxce',
                    align: 'center',

                },
                {
                    label: '毛利率',
                    prop: 'mll',
                    align: 'center',

                }
            ],

        }
    },
    watch: {
        rowData: {
            handler(newVal, oldVal) {
                this.tableDatas = newVal
                this.initChart(newVal)

                console.log('user对象发生了变化', newVal, oldVal);
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {

    },
    methods: {
        init(newVal) {




        },
        initChart(newVal) {
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            newPromise.then(() => {
                //	此dom为echarts图标展示dom
                this.chart = echarts.init(document.getElementById('chart'));
                let dates = [],
                    cgje = [],
                    xsje = [],
                    dataA = [],
                    gxce = [];
                for (let i = 0; i < newVal.length; i++) {
                    dates[i] = newVal[i]['kprq'];
                    cgje[i] = newVal[i]['cgje'];
                    xsje[i] = newVal[i]['xsje'];
                    gxce[i] = newVal[i]['gxce'];
                }
                dataA = [{
                    name: '采购金额',
                    data: cgje
                }, {
                    name: '销售金额',
                    data: xsje
                }, {
                    name: '购销差额',
                    data: gxce
                }]


                const arrs = [];
                const arr = [];
                const arrName = [];
                for (let i = 0; i < dataA.length; i++) {
                    console.log(dataA[i].name)
                    if (i < dataA.length - 1) {
                        arr[i] = {
                            name: dataA[i].name,
                            type: 'bar',
                            barWidth: 20,
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: dataA[i].data
                        }
                    } else {
                        arr[i] = {
                            name: dataA[i].name,
                            type: 'bar',
                            barWidth: 20,
                            // stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: dataA[i].data
                        }
                    }
                    arrName[i] = dataA[i].name

                }
                arrs['data'] = arr;
                arrs['name'] = arrName;
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        itemWidth: 18,
                        itemHeight: 12,
                        icon: "rect",
                        top: '8%',
                        left: '45%', //图例距离左的距离
                        textStyle: {
                            'color': '#000'
                        },
                        data: arrName,

                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        top: '20%',
                        bottom: '10%',
                        containLabel: true,

                    },
                    xAxis: [{
                        type: 'category',
                        axisLabel: {
                            show: true,
                            fontSize: 14,
                            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                            rotate: 30, //调整数值改变倾斜的幅度（范围-90到90）
                            textStyle: {
                                color: "#000",

                            }
                        },

                        axisLine: {
                            show: true,
                            onZero: true,
                            onZeroAxisIndex: null,
                            lineStyle: {
                                color: '#B9B8CE',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        splitLine: { //分割线
                            lineStyle: {
                                color: "#B9B8CE",
                                width: 1,
                                type: "solid"
                            }
                        },
                        data: dates
                    }],
                    yAxis: [{
                        type: 'value',
                        // name: '单位：万元',
                        nameTextStyle: {
                            color: '#000'
                        },
                        axisLabel: {
                            formatter: function (value, index) {
                                if (value >= 100000000) {
                                    return value / 100000000 + ".00亿";
                                } else if (value >= 10000) {
                                    return value / 10000 + ".00万";
                                } else if (value <= -100000000) {
                                    return value / 100000000 + ".00亿";
                                } else if (value <= -10000) {
                                    return value / 10000 + ".00万";
                                } else {
                                    return value;
                                }
                            },
                            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                            rotate: 30, //调整数值改变倾斜的幅度（范围-90到90）
                            fontSize: 14,
                            margin: 8,
                            textStyle: {
                                color: '#000'
                            }
                        },
                        axisLine: {
                            show: true,

                            onZero: true,
                            onZeroAxisIndex: null,

                        }
                    }],
                    // color: color,
                    // gradientColor: ["#f6efa6", " #d88273", '#bf444c'],
                    series: arr

                }


              
                this.chart.setOption(option);
            })


        },

    }
}
</script>


<style lang="scss" scoped>
.echartBox {
    margin-bottom: 15px;
    border: 1px solid rgb(221, 221, 221);
}
</style>